
<template>
  <div class="main">
    <el-container>
      <el-aside style="width: 280px;">
        <div class="Htitle">留学CRM</div>
        <el-menu class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
                 background-color="#333"
                 text-color="#fff"
                 active-text-color="#fff">
          <el-submenu index="0">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/index.svg"
                   alt="" />
              <span slot="title"
                    class="title">首页</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="0-1"
                            :class="name === 'index' ? 'active' : '' "
                            @click="itemClick(0.1)">
                系统首页
              </el-menu-item>
              <el-menu-item index="0-2"
                            :class=" name === 'indexAcountSetting' ? 'active' : ''"
                            @click="itemClick(0.2)">账户设置</el-menu-item>
              <el-menu-item index="0-3"
                            :class=" name === 'indexLoginLog' ? 'active' : ''"
                            @click="itemClick(0.3)">登录日志</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="1"
                        :class=" name === 'check' ? 'active' : ''"
                        @click="itemClick(1)">
            <img class="icon"
                 src="../../assets/index/check.svg"
                 alt="" />
            <span slot="title"
                  class="title">方案查询</span>
          </el-menu-item>

          <el-submenu index="2">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/manage.svg"
                   alt="" />
              <span slot="title"
                    class="title">学生管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1"
                            :class="name === 'studentList' ? 'active' : ''"
                            @click="itemClick(2.1)">学生列表</el-menu-item>
              <!-- <el-menu-item
                index="2-2"
                :class="name === 'studentDetail' ? 'active' : ''"
                @click="itemClick(2.2)"
                >学生详情</el-menu-item
              >
              <el-menu-item
                index="2-3"
                :class="name === 'studentEdit' ? 'active' : ''"
                @click="itemClick(2.3)"
                >编辑学生信息</el-menu-item
              > -->
              <el-menu-item index="2-4"
                            :class="name === 'studentLog' ? 'active' : ''"
                            @click="itemClick(2.4)">登录日志</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/school.svg"
                   alt="" />
              <span slot="title"
                    class="title">学校管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1"
                            :class="name === 'schoolList' ? 'active' : ''"
                            @click="itemClick(3.1)">学校列表</el-menu-item>
              <el-menu-item index="3-2"
                            :class="name === 'schoolAdd' ? 'active' : ''"
                            @click="itemClick(3.2)">添加学校信息</el-menu-item>
              <!-- <el-menu-item
                index="3-3"
                :class="name === 'schoolEdit' ? 'active' : ''"
                @click="itemClick(3.3)"
                >编辑学校信息</el-menu-item
              > -->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/subject.svg"
                   alt="" />
              <span slot="title"
                    class="title">专业管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1"
                            :class="name === 'subjectList' ? 'active' : ''"
                            @click="itemClick(4.1)">专业列表</el-menu-item>
              <el-menu-item index="4-2"
                            :class="name === 'subjectAdd' ? 'active' : ''"
                            @click="itemClick(4.2)">添加专业信息</el-menu-item>
              <!-- <el-menu-item
                index="4-3"
                :class="name === 'subjectEdit' ? 'active' : ''"
                @click="itemClick(4.3)"
                >编辑专业信息</el-menu-item
              > -->
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/order-manage.svg"
                   alt="" />
              <span slot="title"
                    class="title">订单管理</span>
            </template>

            <el-submenu index="5-1">
              <template slot="title">方案订单管理</template>
              <el-menu-item index="5-1-1"
                            :class="name === 'planList' ? 'active' : ''"
                            @click="itemClick(5.11)">方案订单列表</el-menu-item>
              <!-- <el-menu-item index="5-1-2" :class="name === 'planDetail' ? 'active' : ''"
                @click="itemClick(5.12)">订单详情-已付款</el-menu-item> -->
            </el-submenu>

            <el-submenu index="5-2">
              <template slot="title">留学申请订单列表</template>
              <el-menu-item index="5-2-1"
                            :class="name === 'overseasList' ? 'active' : ''"
                            @click="itemClick(5.21)">留学申请订单列表</el-menu-item>
              <!-- <el-menu-item index="5-2-2" :class="name === 'waitDeposit' ? 'active' : ''"
                @click="itemClick(5.22)">订单详情-待支付押金</el-menu-item>

                <el-menu-item index="5-2-3" :class="name === 'waitVerifyBaseInfo' ? 'active' : ''"
                @click="itemClick(5.23)">订单详情-待审核基本资料</el-menu-item>
                <el-menu-item index="5-2-4" :class="name === 'nopassBaseInfo' ? 'active' : ''"
                @click="itemClick(5.24)">订单详情-基本资料审核不通过</el-menu-item>
                <el-menu-item index="5-2-25" :class="name === 'waitChooseSchool' ? 'active' : ''"
                @click="itemClick(5.25)">订单详情-待提交择校方案</el-menu-item>
                <el-menu-item index="5-2-6" :class="name === 'waitStudentChoose' ? 'active' : ''"
                @click="itemClick(5.26)">订单详情-待学生确认择校方案</el-menu-item>
                <el-menu-item index="5-2-7" :class="name === 'waitText' ? 'active' : ''"
                @click="itemClick(5.27)">订单详情-待文书定稿</el-menu-item>
                <el-menu-item index="5-2-8" :class="name === 'waitUploadInfo' ? 'active' : ''"
                @click="itemClick(5.28)">订单详情-待上传申请资料</el-menu-item>
                <el-menu-item index="5-2-9" :class="name === 'waitConfirmInfo' ? 'active' : ''"
                @click="itemClick(5.29)">订单详情-待确认申请材料</el-menu-item>
                <el-menu-item index="5-2-10" :class="name === 'waitPayFee' ? 'active' : ''"
                @click="itemClick(5.2101)">订单详情-待支付申请费用</el-menu-item>
                <el-menu-item index="5-2-11" :class="name === 'waitCommitInfo' ? 'active' : ''"
                @click="itemClick(5.211)">订单详情-待提交申请材料</el-menu-item>
                <el-menu-item index="5-2-12" :class="name === 'waitVerify' ? 'active' : ''"
                @click="itemClick(5.212)">订单详情-待审核</el-menu-item>
                <el-menu-item index="5-2-13" :class="name === 'noPassVerify' ? 'active' : ''"
                @click="itemClick(5.213)">订单详情-审核不通过</el-menu-item>
                <el-menu-item index="5-2-14" :class="name === 'waitConfirmEnter' ? 'active' : ''"
                @click="itemClick(5.214)">订单详情-待确认入读</el-menu-item>
                <el-menu-item index="5-2-15" :class="name === 'waitWriteFee' ? 'active' : ''"
                @click="itemClick(5.215)">订单详情-待填写费用和佣金</el-menu-item>
                <el-menu-item index="5-2-16" :class="name === 'orderFinish' ? 'active' : ''"
                @click="itemClick(5.216)">订单详情-完成</el-menu-item> -->
              <!-- <el-menu-item index="5-2-17"
                            :class="name === 'applyProgress' ? 'active' : ''"
                            @click="itemClick(5.217)">申请进度</el-menu-item> -->
            </el-submenu>
          </el-submenu>
          <!-- </el-submenu> -->

          <el-menu-item index="6"
                        :class="name === 'orderSetting' ? 'active' : ''"
                        @click="itemClick(6)">
            <img class="icon"
                 src="../../assets/index/order-setting.svg"
                 alt="" />
            <span slot="title"
                  class="title">订单设置</span>
          </el-menu-item>

          <el-menu-item index="7"
                        :class="name === 'schoolSubject' ? 'active' : ''"
                        @click="itemClick(7)">
            <img class="icon"
                 src="../../assets/index/progress.svg"
                 alt="" />
            <span slot="title"
                  class="title">国内学校和专业列表</span>
          </el-menu-item>

          <el-submenu index="8">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/setting.svg"
                   alt="" />
              <span slot="title"
                    class="title">设置</span>
            </template>

            <el-submenu index="8-1">
              <template slot="title">平台信息</template>
              <el-menu-item index="8-1-1"
                            :class="name === 'setting' ? 'active' : ''"
                            @click="itemClick(8.11)">平台信息</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title">
              <img class="icon"
                   src="../../assets/index/user-manage.svg"
                   alt="" />
              <span slot="title"
                    class="title">用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="9-1"
                            :class="name === 'userManage' ? 'active' : ''"
                            @click="itemClick(9.1)">用户管理</el-menu-item>
              <el-menu-item index="9-2"
                            :class="name === 'userAdd' ? 'active' : ''"
                            @click="itemClick(9.2)">添加用户</el-menu-item>
              <el-menu-item index="4-3"
                            :class="name === 'userEdit' ? 'active' : ''"
                            @click="itemClick(9.3)">编辑用户</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>

        <div class="userbox">
          <img class="avatar"
               :src="avatar"
               alt="" />
          <div class="username">{{ userName }}</div>
        </div>

        <div class="exitbox">
          <img class="exit"
               src="../../assets/index/exit.svg"
               alt=""
               @click="exit" />
        </div>
      </el-aside>
      <el-main>
        <div>
          <el-dialog title="系统提示"
                     :visible.sync="dialog1Visible"
                     width="32%">
            <div style="font-size: 16px;text-align: center">
              是否确定退出当前用户
            </div>
            <span slot="footer"
                  class="dialog-footer">
              <el-button class="el-button" @click="cancel">取 消</el-button>
              <el-button class="el-button" type="primary"
                         @click="cofirmExit">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- <div class="warningExit" v-show="isExit">
          <div>是否要退出当前用户</div>
          <div class="isExit">
            <span @click="cofirmExit">确定</span>
            <span @click="cancel">取消</span>
          </div>
        </div> -->
        <router-view @routeName="routeName"> </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "index",

  components: {},
  data () {
    return {
      isExit: false,
      currentIndex: 0.1,
      name: "",
      dialog1Visible: false,
      avatar: window.sessionStorage.getItem('avatar')
    };
  },
  mounted () {
    console.log(this.$route);
  },
  computed: {
    // ...mapState["Authorization"],
    userName () {
      return sessionStorage.getItem("username");
    },
  },
  methods: {
    handleOpen () { },
    routeName (routeName) {
      this.name = routeName;
    },
    itemClick (index) {
      this.currentIndex = index;
      if (index === 0.1) {
        this.$router.push({ name: "index" });
      } else if (index === 0.2) {
        this.$router.push({ name: "indexAcountSetting" });
      } else if (index === 0.3) {
        this.$router.push({ name: "indexLoginLog" });
      } else if (index === 1) {
        this.$router.push({ name: "check" });
      } else if (index === 2.1) {
        this.$router.push({ name: "studentList" });
      } else if (index === 2.2) {
        this.$router.push({ name: "studentDetail" });
      } else if (index === 2.3) {
        this.$router.push({ name: "studentEdit" });
      } else if (index === 2.4) {
        this.$router.push({ name: "studentLog" });
      } else if (index === 3.1) {
        this.$router.push({ name: "schoolList" });
      } else if (index === 3.2) {
        this.$router.push({ name: "schoolAdd" });
      } else if (index === 3.3) {
        this.$router.push({ name: "schoolEdit" });
      } else if (index === 4.1) {
        this.$router.push({ name: "subjectList" });
      } else if (index === 4.2) {
        this.$router.push({ name: "subjectAdd" });
      } else if (index === 4.3) {
        this.$router.push({ name: "subjectEdit" });
      } else if (index === 5.11) {
        this.$router.push({ name: "planList" });
      } else if (index === 5.12) {
        this.$router.push({ name: "planDetail" });
      } else if (index === 5.21) {
        this.$router.push({ name: "overseasList" });
      } else if (index === 5.22) {
        this.$router.push({ name: "waitDeposit" });
      } else if (index === 5.23) {
        this.$router.push({ name: "waitVerifyBaseInfo" });
      } else if (index === 5.24) {
        this.$router.push({ name: "nopassBaseInfo" });
      } else if (index === 5.25) {
        this.$router.push({ name: "waitChooseSchool" });
      } else if (index === 5.26) {
        this.$router.push({ name: "waitStudentChoose" });
      } else if (index === 5.27) {
        this.$router.push({ name: "waitText" });
      } else if (index === 5.28) {
        this.$router.push({ name: "waitUploadInfo" });
      } else if (index === 5.29) {
        this.$router.push({ name: "waitConfirmInfo" });
      } else if (index === 5.2101) {
        this.$router.push({ name: "waitPayFee" });
      } else if (index === 5.211) {
        this.$router.push({ name: "waitCommitInfo" });
      } else if (index === 5.212) {
        this.$router.push({ name: "waitVerify" });
      } else if (index === 5.213) {
        this.$router.push({ name: "noPassVerify" });
      } else if (index === 5.214) {
        this.$router.push({ name: "waitConfirmEnter" });
      } else if (index === 5.215) {
        this.$router.push({ name: "waitWriteFee" });
      } else if (index === 5.216) {
        this.$router.push({ name: "orderFinish" });
      } else if (index === 5.217) {
        this.$router.push({ name: "applyProgress" });
      } else if (index === 6) {
        this.$router.push({ name: "orderSetting" });
      } else if (index === 7) {
        this.$router.push({ name: "schoolSubject" });
      } else if (index === 8.11) {
        this.$router.push({ name: "setting" });
      } else if (index === 9.1) {
        this.$router.push({ name: "userManage" });
      } else if (index === 9.2) {
        this.$router.push({ name: "userAdd" });
      } else if (index === 9.3) {
        this.$router.push({ name: "userEdit" });
      }
    },
    handleClose () { },
    exit () {
      this.dialog1Visible = true
      this.isExit = true;
    },
    cofirmExit () {
      sessionStorage.clear();
      this.isExit = false;
      this.$router.push("login");
    },
    cancel () {
      this.dialog1Visible = false
      this.isExit = false;
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  /* list-style: none; */
}
.main {
  background-color: #f9f9f9;
  padding-left: 5px;
}
.el-aside {
  height: 100%;
  background-color: #333333;
}
.Htitle {
  text-align: center;
  line-height: 80px;
  width: 278px;
  height: 80px;
  background-color: #fff;
  border: 1px solid #797979;
}

.el-menu {
  font-weight: 700;
}

.icon {
  width: 24px;
  height: 24px;
}

.title {
  margin-left: 10px;
}

.active {
  background-color: #1abc9c !important;
}

.userbox {
  width: 40%;
  margin-top: 100px;
  border-bottom: 1px solid #fff;
  text-align: center;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.username {
  color: #fff;
  margin-bottom: 10px;
}

.exitbox {
  width: 40%;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.exit {
  cursor: pointer;
}
.warningExit {
  z-index: 99;
  width: 500px;
  height: 100px;
  text-align: center;
  padding-top: 30px;
  border: 2px solid rgb(1, 255, 86);
  background-color: rgba(1, 255, 86, 0.4);
  position: absolute;
  font-weight: 700;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
}
.warningExit .isExit {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.warningExit span {
  cursor: pointer;
}
.el-button {
  width: 60px;
  height: 30px;
}
</style>